<script setup>
import { ref, reactive, computed } from "vue";
// 商品列表(原始数据)
const goodsList = ref([
  { id: 1, name: "篮球", num: 1 },
  { id: 2, name: "玩具", num: 3 },
  { id: 3, name: "书籍", num: 2 },
]);

const totalNum = computed(() => {
  return goodsList.value.reduce((sum, item) => sum + item.num, 0);
});
</script>

<template>
  <h3>礼物清单</h3>
  <table>
    <thead>
      <tr>
        <th>商品名称</th>
        <th>商品数量</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in goodsList" :key="item.id">
        <th>{{ item.name }}</th>
        <th>{{ item.num }}</th>
      </tr>
    </tbody>
  </table>
  <p>礼物的个数：{{ totalNum }} 个</p>
</template>

<style scoped>
table {
  width: 350px;
  border: 1px solid #ccc;
}
table th,
table td {
  border: 1px solid #ccc;
  padding: 10px;
}
table td {
  text-align: center;
}
</style>
